<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微语Linked</title>
      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">  
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <!-- 配置Tailwind主题 - 优化社交连接色调 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4263EB', // 主色调：友好的蓝色，代表连接和沟通
                        secondary: '#00B8D9', // 辅助色：清新的亮蓝，用于交互元素
                        accent: '#7C3AED', // 强调色：柔和的紫色，增添社交感
                        'link-hover': '#Eef2ff', // 链接悬停色
                        'chat-bg': '#F8FAFC', // 聊天背景
                        'chat-bubble': '#FFFFFF', // 他人消息气泡
                        'chat-bubble-self': '#E0E7FF', // 自己消息气泡
                        'status-online': '#10B981', // 在线状态
                        'status-offline': '#9CA3AF', // 离线状态
                        'unread': '#FF5722', // 未读消息提示色
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 12px rgba(0, 0, 0, 0.05)',
                        'bubble': '0 1px 3px rgba(66, 99, 235, 0.1)',
                        'hover': '0 6px 16px rgba(66, 99, 235, 0.08)',
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            /* 隐藏滚动条但保留滚动功能 */
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .chat-bubble-left {
                border-radius: 0.5rem 0.5rem 0.5rem 0;
                margin-left: 0 !important;
                margin-right: auto !important;
                float: left !important;
                clear: both !important;
            }
            .chat-bubble-right {
                border-radius: 0.5rem 0.5rem 0 0.5rem;
                margin-left: auto !important;
                margin-right: 0 !important;
                float: right !important;
                clear: both !important;
            }
            .text-shadow {
                text-shadow: 0 1px 2px rgba(0,0,0,0.05);
            }
        }
    </style>
    
    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
        }
        
        /* 微语主题背景 - 增强连接图案的层次感 */
        .chat-background {
            background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234263eb' fill-opacity='0.03'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            overflow: auto;
        }
        
        /* 平滑过渡动画 - 增强交互体验 */
        .transition-all {
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* 消息进入动画 - 更自然的过渡 */
        @keyframes messageIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .message-in {
            animation: messageIn 0.3s ease forwards;
        }
        
        /* 连接点动画 - 体现"微语Linked"的连接感 */
        @keyframes pulse {
            0% { transform: scale(0.95); opacity: 0.7; }
            50% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(0.95); opacity: 0.7; }
        }
        
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        
        /* 未读消息提示动画 */
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-2px); }
        }
        
        .unread-badge {
            animation: bounce 1.5s infinite;
        }
        
        /* 加载状态动画 */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .loader {
            border-top-color: #4263EB;
            animation: spin 1s linear infinite;
        }

        /*点击会话框时，将会话框的背景颜色改为蓝色*/
        .conversation-item:hover {            
            background-color: #4263EB; /* 更浅的蓝色 hover 效果 */
            transition: all 0.2s ease; /* 添加过渡动画 */
        }

        /* 选中会当前会话框时，持续高亮 */
        .conversation-item.active {            
            background-color: #4263EB; /* 主色调蓝色背景 */
            color: white; /* 文字颜色变为白色 */
            border-radius: 0.5rem; /* 添加圆角 */
            margin: 0 0.5rem; /* 增加边距 */
            box-shadow: 0 2px 5px rgba(66, 99, 235, 0.2); /* 添加阴影 */
            transition: all 0.2s ease; /* 添加过渡动画 */
        }

        /* 选中状态下的文字颜色 */
        .conversation-item.active .text-gray-800,
        .conversation-item.active .text-gray-500 {
            color: white !important; /* 确保文字变为白色 */
        }

        /* 选中状态下的头像背景 */
        .conversation-item.active .bg-primary\/10 {
            background-color: rgba(255, 255, 255, 0.2) !important; /* 半透明白色背景 */
        }

        /* 选中状态下的头像图标 */
        .conversation-item.active .text-primary {
            color: white !important; /* 图标变为白色 */
        }
    </style>
</head>
 <body class="bg-gradient-to-br from-blue-50 to-indigo-50 min-h-screen">
    <!-- 页面总容器 -->
    <div class="container w-full h-screen flex justify-center items-center p-4 sm:p-6 md:p-8">
        <!-- 中间聊天区域 - 主题化卡片设计 -->
        <div class="main w-full max-w-7xl h-[90vh] bg-white rounded-xl shadow-card flex overflow-hidden transition-all hover:shadow-hover">
            <!-- 左侧列表区域 -->
            <div class="left w-1/5 lg:w-64 h-full bg-white border-r border-gray-100 flex flex-col">
                <!-- 当前登录的用户信息 - 移除在线状态显示 -->
                <div class="user w-full h-16 bg-gradient-to-r from-primary/5 to-primary/10 flex items-center px-4 border-b border-gray-100">
                    <div class="flex-1">
                        <p id="current-username" class="font-medium text-gray-800 text-shadow">加载中...</p>
                    </div>
                    <button class="text-gray-400 hover:text-primary transition-colors p-2 rounded-full hover:bg-primary/5">
                        <i class="fa fa-cog"></i>
                    </button>
                </div>
                
                <!-- 搜索栏 - 主题化设计 -->
                <div class="w-full p-3 border-b border-gray-100">
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400 transition-colors group-hover:text-primary">
                            <i class="fa fa-search"></i>
                        </span>
                        <input type="text" placeholder="搜索联系人或对话..." class="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-50 border border-gray-100 focus:border-primary focus:ring-1 focus:ring-primary focus:bg-white text-sm transition-all group">
                    </div>
                </div>
                
                <!-- 导航菜单 - 突出连接主题 -->
                <div class="w-full border-b border-gray-100">
                    <ul class="flex text-sm">
                        <li class="w-1/2 text-center py-3 text-primary border-b-2 border-primary font-medium flex items-center justify-center space-x-2 cursor-pointer">
                            <i class="fa fa-comments-o"></i>
                        </li>
                        <li class="w-1/2 text-center py-3 text-gray-500 hover:text-primary transition-colors flex items-center justify-center space-x-2 cursor-pointer">
                            <i class="fa fa-link"></i>
                        </li>
                    </ul>
                </div>
                
                <!-- 列表内容区域 - 等待服务器数据，移除在线状态标识 -->
                <div class="flex-1 overflow-y-auto scrollbar-hide">
                    <!-- 会话列表 - 空状态，等待服务器数据 -->
                    <div id="conversations-view" class="flex flex-col items-center justify-center h-full p-4 text-gray-500">
                        <div class="w-8 h-8 border-2 border-gray-200 border-t-primary rounded-full loader mb-3"></div>
                        <p class="text-sm text-center">正在获取会话列表...</p>
                        <p class="text-xs mt-1 text-gray-400">请确保网络连接正常</p>
                    </div>
                    
                    <!-- 好友列表 - 空状态，等待服务器数据 -->
                    <!-- 初始状态隐藏，点击再从服务器获取-->
                    <div id="friends-view" class="hidden flex flex-col items-center justify-center h-full p-4 text-gray-500">
                        <div class="w-8 h-8 border-2 border-gray-200 border-t-primary rounded-full loader mb-3"></div>
                        <p class="text-sm text-center">正在获取联系人...</p>
                        <p class="text-xs mt-1 text-gray-400">请确保网络连接正常</p>
                    </div>

                </div>
            </div>
            
            <!-- 右侧聊天内容区域 - 初始状态提示选择对话，移除在线状态显示 -->
            <div class="right w-4/5 lg:w-[calc(100%-16rem)] h-full bg-white flex flex-col">
                <!-- 顶部信息栏 - 未选择对话状态 -->
                <div class="h-16 bg-white border-b border-gray-100 flex items-center px-6">
                    <h2 class="font-medium text-gray-600">请选择一个对话开始聊天</h2>
                </div>
                
                <!-- 聊天消息区域 - 空状态提示 -->
                <div class="flex-1 p-6 chat-background scrollbar-hide flex flex-col items-center">
                    <div class="text-gray-300 text-6xl mb-4">
                        <i class="fa fa-comments-o"></i>
                    </div>
                    <p class="text-gray-500 text-center">从左侧列表选择一个联系人或会话</p>
                    <p class="text-gray-400 text-sm mt-2 text-center">开始您的聊天</p>
                </div>
                
                <!-- 消息输入区域 - 初始状态隐藏 -->
                <div class="border-t border-gray-100 p-3 hidden" id="message-input-area">
                    <!-- 功能按钮
                    <div class="flex items-center text-gray-500 mb-2 px-2">
                        <button class="hover:text-primary transition-colors p-2 rounded-full hover:bg-primary/5">
                            <i class="fa fa-smile-o"></i>
                        </button>
                        <button class="hover:text-primary transition-colors p-2 rounded-full hover:bg-primary/5">
                            <i class="fa fa-paperclip"></i>
                        </button>
                        <button class="hover:text-primary transition-colors p-2 rounded-full hover:bg-primary/5">
                            <i class="fa fa-image"></i>
                        </button>
                        <button class="hover:text-primary transition-colors p-2 rounded-full hover:bg-primary/5">
                            <i class="fa fa-microphone"></i>
                        </button>
                    </div> -->
                    
                    <!-- 输入框 -->
                    <div class="relative mb-2">
                        <textarea placeholder="输入消息..." class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-1 focus:ring-primary outline-none resize-none transition-all" rows="2"></textarea>
                    </div>
                    
                    <!-- 发送按钮 -->
                    <div class="flex justify-end">
                        <button class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-lg transition-all shadow-sm hover:shadow flex items-center">
                            <span>发送</span>
                            <i class="fa fa-paper-plane ml-2"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const navItems = document.querySelectorAll('.left .border-b ul li');
            const conversationsView = document.getElementById('conversations-view');
            const friendsView = document.getElementById('friends-view');
            const textarea = document.querySelector('textarea');
            const sendBtn = document.querySelector('button:has(i.fa-paper-plane)');
            const chatContainer = document.querySelector('.chat-background');
            const chatHeader = document.querySelector('.right .h-16');
            const messageInputArea = document.getElementById('message-input-area');

            // 导航菜单切换功能
            navItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有导航项的选中状态
                    navItems.forEach(el => {
                        el.classList.remove('text-primary', 'border-b-2', 'border-primary', 'font-medium');
                        el.classList.add('text-gray-500', 'hover:text-primary');
                    });
                    
                    // 添加当前导航项的选中状态
                    this.classList.add('text-primary', 'border-b-2', 'border-primary', 'font-medium');
                    this.classList.remove('text-gray-500', 'hover:text-primary');
                    
                    // 切换显示会话列表或好友列表
                    if (this.querySelector('i').classList.contains('fa-comments-o')) {
                        conversationsView.classList.remove('hidden');
                        friendsView.classList.add('hidden');
                    } else {
                        conversationsView.classList.add('hidden');
                        friendsView.classList.remove('hidden');
                        
                        // 只有在点击好友列表导航时才从后端获取好友列表
                        // 检查好友列表是否已经加载过
                        if (friendsView.getAttribute('data-loaded') !== 'true') {
                            // 从服务器获取好友列表
                            $.ajax({
                                url: '/user/getFriendList',
                                type: 'GET',
                                dataType: 'json',
                                success: function(data) {
                                    if (data.code === 200) {
                                        // 渲染好友列表
                                        renderFriends(data.data);
                                        // 标记好友列表已加载
                                        friendsView.setAttribute('data-loaded', 'true');
                                    } else {
                                        // 处理错误情况
                                        console.error('获取好友列表失败:', data.message);
                                    }
                                },
                                error: function(xhr, status, error) {
                                    // 处理请求失败情况
                                    console.error('请求失败:', error);
                                    // 显示错误提示
                                    friendsView.innerHTML = `
                                        <div class="flex flex-col items-center justify-center h-full p-4 text-gray-500">
                                            <i class="fa fa-exclamation-triangle text-4xl mb-3 text-amber-400"></i>
                                            <p class="text-sm text-center">加载失败</p>
                                            <p class="text-xs mt-1 text-gray-400">请检查网络连接后重试</p>
                                        </div>
                                    `;
                                }
                            });
                        }
                    }
                });
            });


            // 获取会话列表数据
            $.ajax({
                url: '/user/getSessionList',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    if (data.code === 200) {
                        console.log(data.data);
                        // 添加null检查
                        renderConversations(data.data || []);
                    } else {
                        window.location.href = 'login.html';
                    }
                },
                error: function(xhr, status, error) {
                    console.error('请求失败:', error);
                    // 网络错误时显示友好提示
                    conversationsView.innerHTML = `
            <div class="flex flex-col items-center justify-center h-full p-4 text-gray-500">
                <i class="fa fa-exclamation-triangle text-4xl mb-3 text-amber-400"></i>
                <p class="text-sm text-center">加载失败</p>
                <p class="text-xs mt-1 text-gray-400">请检查网络连接后重试</p>
            </div>
        `;
                }
            });

// 渲染会话列表
            function renderConversations(conversations) {
                // 确保容器样式：垂直排列、左对齐
                conversationsView.className = 'flex flex-col items-start w-full';
                conversationsView.innerHTML = ''; // 清空列表
                
                // 添加null检查
                if (!conversations || conversations.length === 0) {
                    conversationsView.innerHTML = `
            <div class="flex flex-col items-center justify-center h-full p-4 text-gray-500 w-full">
                <i class="fa fa-inbox text-4xl mb-3 text-gray-300"></i>
                <p class="text-sm text-center">暂无会话记录</p>
                <p class="text-xs mt-1 text-gray-400">开始新的对话吧</p>
            </div>
        `;
                    return;
                }

                // 遍历会话列表，创建会话项
                conversations.forEach(conversation => {

                    const conversationItem = document.createElement('div');
                    // 会话项样式：左对齐，占满宽度，添加底部边框分隔
                    // 会话项类名
                    conversationItem.className = 'flex items-center p-3 w-full border-b border-gray-100 cursor-pointer hover:bg-primary/5 transition-colors conversation-item';
                    // 检查是否为当前选中的会话
                    if (window.currentSessionId && conversation.id.toString() === window.currentSessionId.toString()) {
                        conversationItem.classList.add('active');
                    }
                    // 会话项ID
                    conversationItem.id = `conversation-${conversation.id}`;
                    // 添加data-session-id属性
                    conversationItem.setAttribute('data-session-id', conversation.id);

                    // 会话项内容
                    conversationItem.innerHTML = `
            <div class="flex items-center w-full">
                <!-- 头像区域 -->
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                    <i class="fa fa-user text-primary"></i>
                </div>

                <!-- 主要内容区域（占满剩余空间） -->
                <div class="ml-3 flex-1 min-w-0">
                    <p class="font-medium text-gray-800">${conversation.username}</p> <!-- 移除truncate类，使用户名完整显示 -->
                    <p class="text-xs text-gray-500 truncate">${conversation.lastMessage}</p>
                </div>

                <!-- 时间区域（靠右显示） -->
                <div class="ml-3 text-right flex-shrink-0">
                    <p class="text-[10px] text-gray-400">${formatTime(conversation.lastMessageTime)}</p> <!-- 调小字体并使用格式化函数 -->
                </div>
            </div>
        `;

                    // 添加点击事件（可选）
                    conversationItem.addEventListener('click', () => {
                        // 移除所有会话项的选中状态
                        conversationsView.querySelectorAll('.conversation-item').forEach(item => {
                            item.classList.remove('active');
                        });
                        // 添加当前会话项的选中状态
                        conversationItem.classList.add('active');
                         // 存储当前会话ID
                        window.currentSessionId = conversation.id;
                        console.log('设置当前会话ID:', window.currentSessionId);
                         
                        // 修复：正确获取会话ID
                        const sessionId = conversation.id;
                        // 获取历史消息
                        getHistoryMessages(sessionId);
                        // 显示消息输入区域
                        messageInputArea.classList.remove('hidden');
                        // 更新聊天头部信息
                        updateChatHeader(conversation.username);
                    });

                    conversationsView.appendChild(conversationItem);
                });
            }



            // 渲染好友列表
            function renderFriends(friends) {
                console.log(friends);
                friendsView.innerHTML = ''; // 清空当前好友列表

                // 核心：设置容器为垂直排列且左对齐
                friendsView.className = 'flex flex-col items-start w-full gap-1'; // gap控制项间距

                if (friends.length === 0) {
                    friendsView.innerHTML = `
                        <div class="flex flex-col items-center justify-center h-full p-4 text-gray-500">
                            <i class="fa fa-users text-4xl mb-3 text-gray-300"></i>
                            <p class="text-sm text-center">暂无联系人</p>
                            <p class="text-xs mt-1 text-gray-400">添加新的联系人开始聊天</p>
                        </div>
                    `;
                    return;
                }
                // 遍历好友列表，创建好友项
                friends.forEach(friend => {
                    const friendItem = document.createElement('div');

                    // 单个好友项样式：占满宽度，添加底部边框作为分割线
                    friendItem.className = 'flex items-center w-full p-3 border-b border-gray-100 cursor-pointer hover:bg-primary/5 transition-colors';
                    
                    //好友项内容，从上到下左对齐排列
                    //让标签中的ID等于好友的ID
                    friendItem.id = friend.id;
                    friendItem.innerHTML = `
                        <div class="flex items-center w-full">
                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                                <i class="fa fa-user text-primary"></i>
                            </div>
                            <div class="ml-3 flex-1">
                                <p class="font-medium text-gray-800">${friend.username || friend.getUsername()}</p>
                            </div>
                        </div>
                    `;
                    //给好友标签加上一个点击事件，当我点击这个好友时创建一个会话项
                    friendItem.addEventListener('click', function () {
                        clickFriend(friend);
                    });
                    friendsView.appendChild(friendItem);
                });
            }

            //点击好友项，触发的逻辑
            function clickFriend(friend) {
                // 改进：向服务器查询是否存在与该好友的会话
                checkSessionExists(friend.id, function(exists, sessionId) {
                if (exists) {
                    // 如果存在，查找并激活该会话
                    let conversationItem = conversationsView.querySelector(`[data-session-id='${sessionId}']`);
                    if (conversationItem) {
                        conversationItem.classList.add('active');
                        conversationsView.querySelectorAll('.conversation-item').forEach(item => {
                            if (item !== conversationItem) {
                                item.classList.remove('active');
                            }
                        });
                    }else {
                        // 如果会话存在但前端没有显示，刷新会话列表
                        refreshConversations();
                    }
                } else {
                    // 如果不存在，创建新会话
                    createConversation(friend);
                }
            });
    
            // 自动切换到会话列表视图
            const conversationsNavItem = document.querySelector('.left .border-b ul li:first-child');
            conversationsNavItem.click();
        }

            // 新增：检查会话是否存在的函数
            function checkSessionExists(friendId, callback) {
                $.ajax({
                    url: 'user/checkSessionExists',
                    type: 'POST',
                    data: {
                        friendId: friendId
                    },
                    success: function(data) {
                        if (data.code === 200) {
                            callback(data.data.exists, data.data.sessionId);
                        } else {
                            callback(false, null);
                        }
                    },
                    error: function() {
                        callback(false, null);
                    }
                });
            }

            // 新增：刷新会话列表的函数
        function refreshConversations() {
            $.ajax({
                url: '/user/getSessionList',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    if (data.code === 200) {
                        renderConversations(data.data || []);
                    }
                }
            });
        }
       

            //创建会话项
            function createConversation(friend) {
                //先判断，当前好友是否在会话列表中有存在的会话，如果存在，将这个会话设置为当前会话
                //如果不存在，创建一个新的会话
                //判断会话列表中是否存在当前好友的会话
                let conversationItem = conversationsView.querySelector(`#conversation-${friend.id}`);
                if (conversationItem) {
                    //如果存在，将这个会话设置为当前会话
                    conversationItem.classList.add('active');
                    // 移除其他会话项的选中状态
                    conversationsView.querySelectorAll('.conversation-item').forEach(item => {
                        if (item !== conversationItem) {
                            item.classList.remove('active');
                        }
                    });
                } else {
                    $.ajax({
                        url:"user/createSession",
                        type:"post",
                        data:{
                            friendId:friend.id
                        },
                        success: function(data) {
                            //会话ID等于data.data
                            let sessionId = data.data;
                            console.log(sessionId);
                            
                            //创建一个新的会话项
                            let conversationItem = document.createElement('div');
                            //设置会话项的ID，格式为conversation-好友ID
                            conversationItem.id = `conversation-${friend.id}`;
                            //会话项的类名
                            conversationItem.className = 'flex items-center p-3 w-full border-b border-gray-100 cursor-pointer hover:bg-primary/5 transition-colors conversation-item active';
                            //会话项的内容
                            conversationItem.innerHTML = `
                                <div class="flex items-center w-full">
                                    <!-- 头像区域 -->
                                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                                        <i class="fa fa-user text-primary"></i>
                                    </div>
                                
                                    <!-- 主要内容区域（占满剩余空间） -->
                                    <div class="ml-3 flex-1 min-w-0">
                                        <p class="font-medium text-gray-800">${friend.username}</p>
                                       <!-- <p class="text-xs text-gray-500 truncate">${friend.lastMessage}</p> -->
                                    </div>
                                
                                    <!-- 时间区域（靠右显示） -->
                                    <!-- 让时间只显示到分-->
                                    <!-- 显示当前时间，并使用时间格式化函数 -->
                                    <div class="ml-3 text-right flex-shrink-0">
                                        <p class="text-xs text-gray-500">${formatTime(friend.lastMessageTime)}</p>
                                    </div>
                                </div>
                            `;
                            
                            // 添加点击事件
                            conversationItem.addEventListener('click', () => {
                                // 添加当前会话项的选中状态
                                conversationItem.classList.add('active');
                                // 移除其他会话项的选中状态
                                conversationsView.querySelectorAll('.conversation-item').forEach(item => {
                                    if (item !== conversationItem) {
                                        item.classList.remove('active');
                                    }
                                });
                            });
                            
                            //添加会话项到会话列表
                            conversationsView.appendChild(conversationItem);
                            
                            // 移除其他会话项的选中状态
                            conversationsView.querySelectorAll('.conversation-item').forEach(item => {
                                if (item !== conversationItem) {
                                    item.classList.remove('active');
                                }
                            });
                            
                            // 存储会话ID到自定义属性中，以便后续使用
                            conversationItem.setAttribute('data-session-id', sessionId);
                            // 新增：创建会话后自动点击该会话项
                            setTimeout(() => {
                                conversationItem.click();
                            }, 100);
                            // 新增：创建会话后获取历史消息
                            getHistoryMessages(sessionId);
                            //刷新一下页面
                            refreshConversations();

                        }
                    });
                }
                
                // 自动切换到会话列表视图
                // 获取导航菜单中的会话列表选项并触发点击事件
                const conversationsNavItem = document.querySelector('.left .border-b ul li:first-child');
                conversationsNavItem.click();
            }

            // 获取历史消息
            function getHistoryMessages(sessionId) {
                $.ajax({
                    url: '/user/getMessage',
                    type: 'GET',
                    data: {
                        sessionId: sessionId
                    },
                    dataType: 'json',
                    success: function(data) {
                        if (data.code === 200) {
                            // 渲染历史消息
                            renderMessages(data.data);
                        } else {
                            console.error('获取历史消息失败:', data.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('请求失败:', error);
                        // 显示错误提示
                        chatContainer.innerHTML = `
                            <div class="flex flex-col items-center justify-center h-full p-4 text-gray-500">
                                <i class="fa fa-exclamation-triangle text-4xl mb-3 text-amber-400"></i>
                                <p class="text-sm text-center">加载历史消息失败</p>
                                <p class="text-xs mt-1 text-gray-400">请检查网络连接后重试</p>
                            </div>
                        `;
                    }
                });
            }

            // 渲染历史消息
            function renderMessages(messages) {
                console.log('后端返回的消息数量:', messages.length);
                console.log('消息数据:', messages);
                // 清空聊天容器
                chatContainer.innerHTML = '';
                
                // 添加null检查
                if (!messages || messages.length === 0) {
                    chatContainer.innerHTML = `
                        <div class="flex flex-col items-center justify-center h-full p-4 text-gray-500">
                            <i class="fa fa-comments-o text-4xl mb-3 text-gray-300"></i>
                            <p class="text-sm text-center">暂无消息记录</p>
                            <p class="text-xs mt-1 text-gray-400">开始您的对话吧</p>
                        </div>
                    `;
                    return;
                }
                
                let renderedCount = 0;
                // 获取当前用户信息（假设我们存储在全局变量中）
                const currentUser = window.currentUser || { id: -1 };
                
                // 遍历消息列表，创建消息元素
                messages.forEach((message, index) => {
                    console.log(message.postTime)
                    console.log(`渲染消息 ${index + 1}:`, message);
                    const isCurrentUser = message.fromId === currentUser.id;
                    const messageElement = document.createElement('div');
                    
                    // 设置消息样式和内容
                    if (isCurrentUser) {
                        messageElement.className = 'flex items-start justify-end mb-4 message-in w-full';
                        messageElement.innerHTML = `
                            <div class="bg-chat-bubble-self p-3 rounded-lg chat-bubble-right shadow-bubble max-w-[80%]">
                                <p>${message.content}</p>
                                <span class="text-xs text-gray-400 mt-1 block text-right">${formatTime(message.postTime)}</span>
                            </div>
                        `;
                    } else {
                        messageElement.className = 'flex items-start justify-start mb-4 message-in w-full';
                        messageElement.innerHTML = `
                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mr-2 mt-1">
                                <i class="fa fa-user text-primary text-xs"></i>
                            </div>
                            <div class="bg-white p-3 rounded-lg chat-bubble-left shadow-bubble max-w-[80%]">
                                <p>${message.content}</p>
                                <span class="text-xs text-gray-400 mt-1 block text-right">${formatTime(message.postTime)}</span>
                            </div>
                        `;
                    }
                    
                    // 添加到聊天容器
                    chatContainer.appendChild(messageElement);
                    renderedCount++;
                });
                
                console.log(`实际渲染的消息数量: ${renderedCount}`);
                // 延迟滚动到底部，确保所有消息都已渲染
                setTimeout(() => {
                    chatContainer.scrollTop = chatContainer.scrollHeight;
                }, 0);
            }

            // 更新聊天头部信息
            function updateChatHeader(username) {
                chatHeader.innerHTML = `
                    <div class="flex items-center w-full">
                        <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mr-3">
                            <i class="fa fa-user text-primary"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="font-medium text-gray-800 truncate">${username}</p>
                        </div>
                    </div>
                `;
            }

            // 在WebSocket连接代码之前添加
            // 存储每个会话的未读消息信息
            window.unreadMessages = {
                // 格式: sessionId: {count: 未读数量, lastMessage: 最后一条未读消息}

            };

            //实例化websocket
            let socket = new WebSocket("ws://" + location.host + "/sentMessage");

            socket.onopen = ()=>{
                console.log('连接成功');
            }
            
        
            // 处理收到的消息
            socket.onmessage = function (event) {
                const message = JSON.parse(event.data);
                console.log('收到消息:', message);
                
                // 判断是否为当前正在查看的会话
                const currentSessionId = window.currentSessionId;
                const isCurrentSession = currentSessionId && message.sessionId === currentSessionId;
                
                // 如果不是当前会话，增加未读计数
                if (!isCurrentSession) {
                    // 更新未读消息存储
                    if (!window.unreadMessages[message.sessionId]) {
                        window.unreadMessages[message.sessionId] = {count: 0, lastMessage: ''};
                    }
                    window.unreadMessages[message.sessionId].count++;
                    window.unreadMessages[message.sessionId].lastMessage = message.content;
                }
                
                // 渲染新消息
                renderNewMessage(message);
                
                // 延迟刷新会话列表，确保服务器数据已更新
                setTimeout(() => {
                    refreshConversations();
                }, 300);
            };


            

            initSendMessage();
            // 添加消息发送功能
            function initSendMessage() {

                const textarea = document.querySelector('textarea');
                const sendBtn = document.querySelector('button:has(i.fa-paper-plane)');
                const chatContainer = document.querySelector('.chat-background');
                const chatHeader = document.querySelector('.right .h-16');
                const messageInputArea = document.getElementById('message-input-area');
                if (!sendBtn || !textarea) {
                    console.error('发送按钮或输入框不存在');
                    return;
                }
                // 发送消息函数
                function sendMessage() {
                    // 检查WebSocket连接状态
                    if (!socket || socket.readyState !== WebSocket.OPEN) {
                        console.error('WebSocket连接未建立');
                        alert('发送失败，请检查网络连接');
                        return;
                    }
                    // 获取当前会话ID
                    const activeConversation = document.querySelector('.conversation-item.active');
                    if (!activeConversation) {
                        alert('请先选择一个对话');
                        return;
                    }
                    const sessionId = activeConversation.getAttribute('data-session-id');
                    console.log('当前会话ID:', sessionId);
                    if (!sessionId) {
                        alert('无法获取会话ID');
                        return;
                    }
                    // 保存当前会话ID，确保在异步操作中不会丢失
                    window.currentSessionId = sessionId;
                    console.log('设置当前会话ID:', window.currentSessionId);   
                     // 确保在会话列表刷新时能正确匹配
                    window.currentSessionId = sessionId;
                    // 获取消息内容并验证
                    const message = textarea.value.trim();
                    if (!message) {
                        alert('消息不能为空');
                        return;
                    }
                    // 构建消息对象
                    const messageObj = {
                        type: 'message',
                        sessionID: sessionId,
                        content: message,
                        postTime: new Date().toISOString()
                    };
                    console.log('发送消息对象:', messageObj);

                

                    try {
                        // 发送消息
                        socket.send(JSON.stringify(messageObj));
                        console.log('消息发送成功:', messageObj);
                        //添加延迟获取历史消息
                        setTimeout(() => {
                            getHistoryMessages(sessionId);
                        }, 300);

                        // 添加短暂延迟后再获取会话列表
                        setTimeout(() => {
                            $.ajax({
                                url: '/user/getSessionList',
                                type: 'GET',
                                dataType: 'json',
                                success: function(data) {
                                    if (data.code === 200) {
                                        console.log(data.data);
                                        // 添加null检查
                                        renderConversations(data.data || []);
                                    } else {
                                        window.location.href = 'login.html';
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error('请求失败:', error);
                                    // 网络错误时显示友好提示
                                    conversationsView.innerHTML = `
                                <div class="flex flex-col items-center justify-center h-full p-4 text-gray-500">
                                    <i class="fa fa-exclamation-triangle text-4xl mb-3 text-amber-400"></i>
                                    <p class="text-sm text-center">加载失败</p>
                                    <p class="text-xs mt-1 text-gray-400">请检查网络连接后重试</p>
                                </div>
                            `;
                                }
                            });
                        }, 300); // 300毫秒延迟
                        
                        console.log('发送成功之后，将左侧会话项的预览消息和时间换成刚刚发送出去的消息');


                        // 清空输入框
                        textarea.value = '';

                        // 可选：添加本地反馈（例如显示"已发送"状态）
                        // 注意：实际的消息显示会由服务器返回后通过onmessage处理
                    } catch (error) {
                        console.error('消息发送失败:', error);
                        alert('发送失败，请重试');
                    }
                }
                // 为发送按钮添加点击事件
                sendBtn.addEventListener('click', sendMessage);

                // 添加回车发送功能（按下Ctrl+Enter或Shift+Enter也可以换行）
                textarea.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {
                        e.preventDefault(); // 阻止默认的换行行为
                        sendMessage();
                    }
                });

                console.log('消息发送功能初始化完成');
            }



            function renderNewMessage(message) {
                // 确保window.currentUser已定义
                if (!window.currentUser) {
                    console.error('当前用户信息未定义');
                    return;
                }
                const isCurrentUser = message.fromId === window.currentUser.id;
                const messageElement = document.createElement('div');
                // 设置消息样式和内容
                if (isCurrentUser) {
                    messageElement.className = 'flex items-start justify-end mb-4 message-in w-full';
                    messageElement.innerHTML = `
                    <div class="bg-chat-bubble-self p-3 rounded-lg chat-bubble-right shadow-bubble max-w-[80%]">
                    <p>${message.content}</p>
                    <span class="text-xs text-gray-400 mt-1 block text-right">${formatTime(message.postTime)}</span>
                </div>
                `;
                } else {
                    messageElement.className = 'flex items-start justify-start mb-4 message-in w-full';
                    messageElement.innerHTML = `
                    <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mr-2 mt-1">
                        <i class="fa fa-user text-primary text-xs"></i>
                    </div>
                    <div class="bg-white p-3 rounded-lg chat-bubble-left shadow-bubble max-w-[80%]">
                        <p>${message.content}</p>
                        <span class="text-xs text-gray-400 mt-1 block text-right">${formatTime(message.postTime)}</span>
                    </div>
                    `;
                }
                // 添加到聊天容器
                chatContainer.appendChild(messageElement);
                // 自动滚动到底部
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }

            socket.onerror = ()=>{
                console.log('连接错误');
            }

            socket.onclose = ()=>{
                console.log('连接关闭');
            }

        });
        // 页面加载完成后获取用户信息
        $(document).ready(function() {
            getUserInfo();
        });

        // 获取用户信息的函数
        function getUserInfo() {
            $.ajax({
                url: "/user/getUserInfo",
                type: "get",
                success: function (data) {
                    console.log(data);
                    if (data.code == 200) {
                        // 正确登录，将用户名替换为data.data.userName
                        console.log(data.data.username);
                        const currentUsernameElement = document.getElementById('current-username');
                        currentUsernameElement.textContent = data.data.username;
                        // 存储当前用户信息到全局变量
                        window.currentUser = data.data;
                    } else {
                        // 登录失败，提示用户登录
                        alert("请先登录");
                        // 跳转到登录页面
                        window.location.href = "login.html";
                    }
                },
                error: function() {
                    // 请求失败处理
                    alert("获取用户信息失败，请重试");
                }
            });
        }

         // 时间格式化函数
        function formatTime(timeInput) {
            // 检查输入是否有效
            if (!timeInput) {
                return '未知时间';
            }

            let date;
            // 处理不同类型的时间输入
            if (typeof timeInput === 'number' || /^\d+$/.test(timeInput)) {
                // 检查输入是否有效
                if (!timeInput) {
                    return '刚刚'; // 改为更友好的提示
                }
                // 如果是数字或数字字符串，视为时间戳
                const timestamp = typeof timeInput === 'string' ? parseInt(timeInput) : timeInput;
                // 检查时间戳长度，判断是毫秒还是秒
                date = new Date(timestamp.toString().length === 10 ? timestamp * 1000 : timestamp);
            } else {
                // 否则视为字符串格式时间
                date = new Date(timeInput);
            }

            // 检查日期是否有效
            if (isNaN(date.getTime())) {
                return '无效时间';
            }

            const now = new Date();
            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
            const yesterday = new Date(today);
            yesterday.setDate(yesterday.getDate() - 1);
            const messageDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());

            // 格式化时间部分（小时:分钟）
            const timePart = date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });

            // 判断日期并返回相应格式
            if (messageDate.getTime() === today.getTime()) {
                return timePart; // 今天显示时间
            } else if (messageDate.getTime() === yesterday.getTime()) {
                return '昨天 ' + timePart; // 昨天显示"昨天 时间"
            } else {
                return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }) + ' ' + timePart; // 其他日期显示"月/日 时间"
            }
        }
    </script>
</body>
</html>


        